<template>
  <div class="codeForm">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
      <!-- 币种名称 -->
      <el-form-item :label="$t('candyBox.iconName')" prop="code">
        <el-input v-model.trim="form.code" maxlength="50" clearable></el-input>
      </el-form-item>
      <!-- 合约地址 -->
      <el-form-item :label="$t('candyBox.contractName')" prop="contract">
        <el-input v-model.trim="form.contract" maxlength="12" clearable></el-input>
      </el-form-item>
      <!-- 官方地址 -->
      <el-form-item :label="$t('candyBox.offiAddress')" prop="website">
        <el-input v-model.trim="form.website" maxlength="255" clearable></el-input>
      </el-form-item>
      <!-- 联系方式 -->
      <el-form-item :label="$t('candyBox.contactWays')" prop="contact">
        <el-input v-model.trim="form.contact" maxlength="255" clearable></el-input>
      </el-form-item>
      <!-- 上传图标 -->
      <el-form-item :label="$t('candyBox.uploadIcon')">
        <el-upload
          class="avatar-uploader"
          action="111"
          :show-file-list="false"
          :auto-upload="false"
          :on-success="handleAvatarSuccess"
          :on-change="onchange"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 币种简介 -->
      <el-form-item :label="$t('candyBox.tokenIntroduction')" class="introduction">
        <el-input type="textarea" v-model.trim="form.introduction" clearable></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Apply', // 各种申请 上币申请 1，糖果盒子2，交易大赛3，
  components: {
  },
  data() {
    return {
      form: {
        code: '', // 币种名称
        contract: '', // 合约名称
        website: '', // 官网
        contact: '', // 联系方式
        chain: 'EOS',
        type: 1, // 上币申请 1，糖果盒子2，交易大赛3，
        introduction: '', // 币种介绍
        logoUrl: '', // 图片地址
      },
      rules: {
        name: [
          { required: true, message: this.$t('candyBox.enterProjectName'), trigger: 'blur' },
        ],
        code: [
          { required: true, message: this.$t('candyBox.enterTokenName1'), trigger: 'blur' },
        ],
        contract: [
          { required: true, message: this.$t('candyBox.enterContractAddress'), trigger: 'blur' },
        ],
        website: [
          { required: true, message: this.$t('candyBox.enterWebsiteAddress'), trigger: 'blur' },
        ],
        airdropCount: [
          { required: true, message: this.$t('candyBox.enterAirdropAmount'), trigger: 'blur' },
        ],
        contact: [
          { required: true, message: this.$t('candyBox.enterContactWay'), trigger: 'blur' },
        ],
      },
    };
  },
  props: {
    timerUpdate: {
      type: Object,
      default: null,
    },
  },
  watch: {
    'timerUpdate.time': function change() {
      if (this.timerUpdate.action === 'submit') {
        this.handleCheckForm();
      }
      if (this.timerUpdate.action === 'reset') {
        this.handleResetForm();
      }
    },
    '$store.state.app.language': function change() {
      this.rules = {
        name: [
          { required: true, message: this.$t('candyBox.enterProjectName'), trigger: 'blur' },
        ],
        code: [
          { required: true, message: this.$t('candyBox.enterTokenName1'), trigger: 'blur' },
        ],
        contract: [
          { required: true, message: this.$t('candyBox.enterContractAddress'), trigger: 'blur' },
        ],
        website: [
          { required: true, message: this.$t('candyBox.enterWebsiteAddress'), trigger: 'blur' },
        ],
        airdropCount: [
          { required: true, message: this.$t('candyBox.enterAirdropAmount'), trigger: 'blur' },
        ],
        contact: [
          { required: true, message: this.$t('candyBox.enterContactWay'), trigger: 'blur' },
        ]
      };
    },
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // 重置表格
    handleResetForm() {
      this.form.code = '';
      this.form.contract = '';
      this.form.contact = '';
      this.form.website = '';
      this.form.airdropCount = '';
      this.form.introduction = '';
      this.form.logoUrl = '';
      this.$refs.form.clearValidate();
    },
    // 提交到服务端
    handleCheckForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('listenSubmit', 'apply', this.form);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload() {
    },
    // 当上传图片后，调用onchange方法，获取图片本地路径
    onchange() {
      const ev = event || window.event;
      const file = ev.target.files[0];
      const reader = new FileReader();
      const isLt = file.size / 1024 < 500;
      if (!isLt) {
        this.$message.error(this.$t('candyBox.notExceed'));
        return;
      }
      // 转base64
      reader.onload = (e) => {
        this.form.logoUrl = e.target.result // 将图片路径赋值给src
      }
      reader.readAsDataURL(file);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.introduction {
  /deep/ .el-textarea__inner {
    min-height: 70px !important;
  }
}

.theme-278EDA {
}
.theme-1B1D27 {
  .codeForm {
    /deep/ .el-input__inner {
      color: #000;
    }
  }
}
</style>

